import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import Logo from "../assets/logo";
import { Button, Form, Input, NavBar, Card, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { setToken } from "../utils/tools";
import { RegAPI } from "../services/loginReg";
function Reg() {
  const nav = useNavigate();
  const back = () => nav("/");
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  return (
    <div className="reg-y">
      <NavBar onBack={back}>好大夫</NavBar>
      <Logo />
      <h2>好大夫用户注册</h2>
      <Card>
        <Form
          // 注册的点击事件
          onFinish={(v) => {
            if (v.password !== v.sPassword) {
              Toast.show({ content: "两次密码不一致", position: "bottom" });
            } else {
              console.log(123);
              RegAPI({ userName: v.userName, password: v.password })
                .then((res) => {
                  Toast.show({ content: res.errorMessage });
                  setToken(res.data);
                  nav("/");
                })

                .catch(() => {
                  Toast.show({ content: "用户名已存在" });
                });
            }
          }}
        >
          <Form.Item
            label="用户名:"
            name="userName"
            rules={[{ required: true, message: "用户名不能为空" }]}
          >
            <Input placeholder="请输入用户名" clearable />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "密码名不能为空" }]}
            extra={
              <div className="">
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="请输入密码"
              clearable
              type={visible ? "text" : "password"}
            />
          </Form.Item>
          <Form.Item
            label="确认密码"
            rules={[{ required: true, message: "密码不能为空" }]}
            name="sPassword"
            extra={
              <div className="">
                {!visible2 ? (
                  <EyeInvisibleOutline onClick={() => setVisible2(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible2(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="请确认密码"
              clearable
              type={visible2 ? "text" : "password"}
            />
          </Form.Item>
          <Form.Item>
            <Button block type="submit" color="primary" size="large">
              注册
            </Button>
          </Form.Item>
        </Form>
        <Link to="/login">已有账号，去登录</Link>
      </Card>
      <p style={{ textAlign: "center" }}>@东山科技</p>
    </div>
  );
}

export default Reg;
